<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }
        .wrapper {
            width: 1200px;
            margin: 100px auto;
        }
        .container {
            display: flex;
            width: 100%;
            height: 200px;
            border: 1px solid #aaa;
        }
        .container,
        .container .content {
            padding: 12px;
            box-sizing: border-box;
        }
        .container .image {
            width: 300px;
            height: 100%;
        }
        .container .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
        }
        .container img {
            width: 100%;
            height: 100%;
        }
        .container .content .keywords {
            display: flex;
        }
        .container .content .keywords>div {
            background-color: #aaa;
            height: 24px;
            line-height: 24px;
            border-radius: 24px;
            margin: 0 16px;
            padding: 0 12px;
            box-sizing: border-box;
            font-size: 12px;
            
        }
        .container .content .info {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!-- <div class="container">
            <div class="image">
                <img src="./VCG211355917064.jpg" alt="">
            </div>
            <div class="content">
                <div class="title">5G商用在即，三大运营商营收持续下降</div>
                <div class="keywords">
                    <div>三大运营商</div>
                    <div>中国移动</div>
                    <div>5G商用</div>
                </div>
                <div class="info">
                    <div class="time">新京报经济新闻  2019-1028 11:50:28</div>
                    <div class="comments">评论数: 58</div>
                </div>
            </div>
        </div> -->
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./lib/moment.min.js"></script>
    <script>
        const baseURL = 'http://www.liulongbin.top:3006';
        const wrapper = document.querySelector('.wrapper');
        const newsURL = '/api/news';
        function search(params) {
            axios({
                method: 'get',
                url: baseURL + newsURL,
            }).then((res) => {
                wrapper.innerHTML = '';
                for (const item of res.data.data) {
                    console.log(res);
                    const el = document.createElement('div');
                    el.setAttribute('class', 'container')
                    el.setAttribute('class', 'content')
                    el.innerHTML = `
                        <div class="container">
                            <div class="image">
                                <img src= ${ baseURL + item.img } alt="">
                            </div>
                            <div class="content">
                                <div class="title">${ item.title }</div>
                                <div class="keywords">
                                    ${
                                        item.tags.split(',')
                                        .map(tag => `<div>${ tag }</div>`)
                                        .join('')
                                    }
                                </div>
                                <div class="info">
                                    <div class="time">${ item.source }  ${moment(item.time).format('YYYY-MM-DD hh:mm:ss')}</div>
                                    <div class="comments">评论数: ${ item.cmtcount }</div>
                                </div>
                        </div>
                    `;
                    wrapper.appendChild(el);
                }
            })
        }
        search();
    </script>
</body>
</html>